<template>
  <el-container style="height: 100%">
    <el-aside style="width: 160px; height: 100%; background-color: #545c64; -webkit-app-region: no-drag;">
      <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          :default-active="defaultKey"
          text-color="#fff"
          @select="handleSelect"
          style="border-right: none"
      >
        <el-menu-item v-for="item in menus" :key="`el-menu-item-${item.code}`" :index="item.code">
          <el-icon v-if="item.eIcon"><component :is="item.eIcon" /></el-icon>
          <span v-if="item.iconfont">&nbsp;<i :class="item.iconfont"></i>&nbsp;&nbsp;</span>{{item.title}}
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="padding: 0">
        <el-card class="box-card">
          <div style="padding-bottom: 18px">
            <div style="color: #909399; width: 300px; float: left">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item v-for="item in breadHeader" :key="`breadcrumb-item-${item}`">{{item}}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <div style="width: 120px; float: right; text-align: center; -webkit-app-region: no-drag;">
              <el-icon @click="windowHide" style="cursor: pointer"><Minus /></el-icon>
              <el-icon v-if="isMax" @click="windowReset" style="margin-left: 20px; cursor: pointer"><CopyDocument /></el-icon>
              <el-icon v-if="!isMax" @click="windowFull" style="margin-left: 20px; cursor: pointer"><FullScreen /></el-icon>
              <el-icon @click="windowClose" style="margin-left: 20px; cursor: pointer"><Close /></el-icon>
            </div>
          </div>
        </el-card>
      </el-header>
      <el-main style="margin-top: 22px; padding-left: 20px; padding-right: 20px; overflow: auto; -webkit-app-region: no-drag;">
        <component v-for="item in tplList" :key="`el-main-component-${item.code}`" :is="item.content" />
      </el-main>
    </el-container>
  </el-container>

  <el-dialog
      v-model="dialogVisible"
      title="提示"
      width="400"
  >
    <template #footer>
      <div class="dialog-footer" style="text-align: center">
        <el-button @click="dialogVisible = false">
          <icon-font-ref name="Cancel" :size="12"></icon-font-ref>
          取消
        </el-button>
        <el-button type="warning" @click="closeAbstract">
          <el-icon><SwitchButton /></el-icon>
          直接退出
        </el-button>
        <el-button type="primary" @click="minWindow">
          <icon-font-ref name="Tray" :size="12"></icon-font-ref>
          最小化到托盘
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { Minus, CopyDocument, FullScreen, Close, UserFilled, ChatLineRound, CreditCard, SwitchButton, RefreshRight } from "@element-plus/icons-vue"
import DomainManage from "@/components/domain/DomainManage.vue"
import IconFontRef from "@/components/common/IconFontRef.vue"

export default {
  name: 'MainFrame',
  components: {
    Minus, CopyDocument, FullScreen, Close, UserFilled, ChatLineRound, CreditCard, SwitchButton, RefreshRight, DomainManage, IconFontRef
  },
  data() {
    return {
      defaultKey: 'domain',
      breadHeader: [],
      isMax: false,
      menus: [
        {
          code: 'domain',
          title: 'SSL域名',
          eIcon: null,
          iconfont: 'iconfont icon-yuming'
        },
        {
          code: 'account',
          title: '云账号管理',
          eIcon: UserFilled,
          iconfont: ''
        },
        {
          code: 'server',
          title: '服务器管理',
          eIcon: null,
          iconfont: 'iconfont icon-fuwuqi'
        },
        {
          code: 'proof',
          title: '用户凭证',
          eIcon: CreditCard,
          iconfont: ''
        },
        {
          code: 'suggest',
          title: '改进建议',
          eIcon: ChatLineRound,
          iconfont: null
        }
      ],
      tplList: [],

      dialogVisible: false
    }
  },
  methods: {
    /**
     * 选中菜单.
     * @param key
     * @param keyPath
     */
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      if (key === 'suggest') {
        const shell = require('electron').shell;
        shell.openExternal('https://gitee.com/sofical/free-ssl-auto-deploy/issues')
        return
      }

      console.log('config', this.$router, keyPath)

      let tpl = this.$router[key]
      if (!tpl) {
        return
      }
      this.loadBreadcrumb(keyPath)
      this.tplList = [];

      setTimeout(() => {
        this.tplList = [{
          code: key,
          content: tpl
        }];
      }, 50)
    },
    /**
     * 加载面包屑.
     */
    loadBreadcrumb(indexPath) {
      let names = [];
      indexPath.forEach(key => {
        names.push(this.findMenuName(key, this.menus))
      })
      this.breadHeader = names;
    },
    /**
     * 加载菜单标题
     */
    findMenuName(key, menu) {
      let menuName = ''
      menu.forEach(item => {
        if (item.code === key) {
          menuName = item.title
          return
        }
        if (menuName === '' && item.child) {
          menuName = this.findMenuName(key, item.child)
        }
      })
      return menuName;
    },
    /**
     * 最小化窗体.
     */
    windowHide() {
      const ipc = require('electron').ipcRenderer;
      ipc.send('window-hide');
      console.log('send message success: window-hide')
    },
    /**
     * 最大化窗体.
     */
    windowFull() {
      const ipc = require('electron').ipcRenderer;
      ipc.send('window-full');
      this.isMax = true;
      console.log('send message success: window-full')
    },
    /**
     * 还原窗体.
     */
    windowReset() {
      const ipc = require('electron').ipcRenderer;
      ipc.send('window-reset');
      this.isMax = false;
      console.log('send message success: window-reset')
    },
    /**
     * 关闭窗体.
     */
    windowClose() {
      this.dialogVisible = true
    },
    /**
     * 直接退出.
     */
    closeAbstract() {
      this.dialogVisible = false
      const ipc = require('electron').ipcRenderer;
      ipc.send('window-quit');
      console.log('send message success: window-quit')
    },
    /**
     * 最小化窗体.
     */
    minWindow() {
      this.dialogVisible = false
      const ipc = require('electron').ipcRenderer;
      ipc.send('window-close');
      console.log('send message success: window-close')
    }
  },
  mounted() {
    this.handleSelect(this.defaultKey, [this.defaultKey])
    const ipc = require('electron').ipcRenderer;
    ipc.on('resize', (event, msg) => {
      console.log('fffffffffffffff', event, msg)
    })
    ipc.on('window-resize', (event, msg) => {
      console.log('xxxxxxxxxxxxxxxxxx', msg)
      this.isMax = msg === 'full'
    })
  }
}
</script>

<style scoped>

</style>